/* eslint-disable consistent-return */
/* eslint-disable no-nested-ternary */
/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { DownOutlined, PlusOutlined, UpOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import {
  Card,
  Button,
  Form,
  Input,
  Select,
  message,
  Row,
  Col,
  Tabs,
  Modal,
  Divider,
  Dropdown,
  Menu,
  Badge,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import styles from '@/utils/utils.less';
import Authorized from '@/utils/Authorized';
import { checkPermissions } from '@/utils/authority';
import HOCSelect from '@/components/AntDesign/Select';
import Area from '../../components/Area';
import Customer from '../../components/CustomerWithState'; // 获取字典客户名称
import TextOverFlow from '../../components/TextOverFlow';

const { confirm } = Modal;
const { Option } = Select;
const FormItem = Form.Item;
const { TabPane } = Tabs;
@connect(({ publicdata, singlemanage, loading, login }) => ({
  dictCode: publicdata.dictCode,
  loading: loading.models.singlemanage,
  submitLoading: loading.effects['singlemanage/assignResp'] || false,
  formFieldsValue: singlemanage.formFieldsValue,
  expandForm: singlemanage.expandForm,
  pageData: singlemanage.pageData,
  activeKey: singlemanage.activeKey,
  respList: singlemanage.respList,
  respAllList: singlemanage.respAllList,
  login,
  valuesArr: singlemanage.valuesArr,
}))
class TableList extends React.Component {
  formRef = React.createRef()

  constructor(props) {
    super(props);
    this.state = {
      userType: 1,
      selectedRowKeys: [],
      selectedRows: [],
      modalVisible: false,
    };
    // 表单布局
    this.formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
  }

  componentDidMount = () => {
    const {
      dispatch,
      login: { systemList },
    } = this.props;
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
    });
    this.setState({ userType });
    // 获取字典状态
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['CUST_ACCO_STATE'],
    });
    // 获取字典页签数据
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['CUST_ACCO_PAGE'],
    });
    if (
      checkPermissions('business:custInsAcco:appoint') ||
      checkPermissions('business:custAccuAcco:appoint')
    ) {
      dispatch({
        type: 'singlemanage/fetchRespList',
        payload: {},
      });
    }
    this.getInitialList();
  };

  getInitialList = () => {
    const {
      pageData: { pagination },
      dispatch,
      location,
      formFieldsValue,
      activeKey,
    } = this.props;
    if (location.queryParam) {
      dispatch({
        type: 'singlemanage/updateModelData',
        payload: { formFieldsValue: location.queryParam, expandForm: true },
      });
    }
    dispatch({
      type: 'singlemanage/updateModelData',
      payload: {
        activeKey,
      },
    });
    this.searchList(
      this.processFormData({ ...formFieldsValue }),
      activeKey,
      pagination.current,
      pagination.pageSize
    );
  };

  // 点击查询按钮
  searchBtnList = async activeKey => {
    const { valuesArr, dispatch } = this.props;
    const values = await this.formRef.current.validateFields(valuesArr);
    await dispatch({
      type: 'singlemanage/updateModelData',
      payload: {
        formFieldsValue: values,
        activeKey,
      },
    });
    this.searchList(this.processFormData(values), activeKey);
  };

  // 查询
  searchList = (
    formFieldsValue,
    activeKey = '1',
    currentPage = 1,
    pageSizes = 10,
    isClear = true
  ) => {
    if (isClear) {
      this.setState({ selectedRows: [], selectedRowKeys: [] });
    }

    const { dispatch } = this.props;
    const pageArg = { currentPage, pageSizes };
    const values = {
      ...formFieldsValue,
      pageArg,
    };

    dispatch({
      type: 'singlemanage/updateModelData',
      payload: {
        values,
      },
    });

    if (activeKey === '1') {
      // 社保
      dispatch({
        type: 'singlemanage/fetchList',
        payload: values,
      });
    } else {
      // 公积金
      dispatch({
        type: 'singlemanage/fetchAccuList',
        payload: values,
      });
    }
  };

  // 处理form数据
  processFormData = fieldsValue => {
    const formFieldsValue = {};
    const tempFieldsValue = fieldsValue;
    Object.keys(tempFieldsValue).forEach(key => {
      if (key === 'accoName') {
        tempFieldsValue[key] = (tempFieldsValue[key] && tempFieldsValue[key].trim()) || null;
      }
      if (tempFieldsValue[key] && tempFieldsValue[key].key) {
        formFieldsValue[key] =
          tempFieldsValue[key].key === undefined ? null : tempFieldsValue[key].key;
      } else {
        formFieldsValue[key] = tempFieldsValue[key] === undefined ? null : tempFieldsValue[key];
      }
    });
    return formFieldsValue;
  };

  // 点击复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRows, selectedRowKeys });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { activeKey, formFieldsValue } = this.props;
    this.searchList(
      this.processFormData(formFieldsValue),
      activeKey,
      pagination.current,
      pagination.pageSize,
      false
    );
  };

  // 重置
  resetSearch = async () => {
    const { dispatch } = this.props;
    await dispatch({
      type: 'singlemanage/updateModelData',
      payload: { formFieldsValue: {} },
    });
    this.formRef.current.resetFields();
    this.state.selectedRowKeys = [];
    this.state.selectedRows = [];
  };

  // 展开收起
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'singlemanage/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  // 模糊搜索
  getData = (value, id) => {
    if (id) {
      this.formRef.current.setFieldsValue({ [id]: value });
    }
  };

  // 切换页签
  changeTabPane = activeKey => {
    const { dispatch, location, formFieldsValue } = this.props;
    const tempUrl = location.pathname && location.pathname.split('/index')[0];
    router.push(`${tempUrl}/index?activeKey=${activeKey}`);
    // 更改当前models里面state的数据
    dispatch({
      type: 'singlemanage/updateModelData',
      payload: {
        activeKey,
        formFieldsValue: {
          ...formFieldsValue,
        },
      },
    });

    this.setState({ selectedRows: [], selectedRowKeys: [] }, () => {
      this.searchList(this.processFormData(formFieldsValue), activeKey);
    });
  };

  // 新增社保
  addSocial = () => {
    const { activeKey, location } = this.props;
    const tempUrl = location.pathname && location.pathname.split('/index')[0];
    router.push(`${tempUrl}/insadd?activeKey=${activeKey}`);
  };

  // 新增公积金
  addFund = () => {
    const { activeKey, location } = this.props;
    const tempUrl = location.pathname && location.pathname.split('/index')[0];
    router.push(`${tempUrl}/accuadd?activeKey=${activeKey}`);
  };

  // 查看详情
  goDetails = id => {
    const { activeKey, location } = this.props;
    const tempUrl = location.pathname && location.pathname.split('/index')[0];
    router.push(`${tempUrl}/${activeKey === '1' ? 'insdetail' : 'accudetail'}?baseInfoId=${id}`);
  };

  // 修改
  goUpdate = id => {
    const { activeKey, location } = this.props;
    const tempUrl = location.pathname && location.pathname.split('/index')[0];
    router.push(
      `${tempUrl}/${
        activeKey === '1' ? 'insupdate' : 'accuupdate'
      }?baseInfoId=${id}&activeKey=${activeKey}`
    );
  };

  // 删除
  delList = delId => {
    const { dispatch, activeKey } = this.props;
    this.setState({ selectedRowKeys: [delId] });
    const param = activeKey === '1' ? { custInsAccoId: delId } : { custAccuAccoId: delId };
    confirm({
      icon: <QuestionCircleOutlined />,
      title: '你确定要删除这些数据吗？',
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        if (activeKey === '1') {
          dispatch({
            type: 'singlemanage/delInsfetchList',
            payload: param,
          });
        } else {
          dispatch({
            type: 'singlemanage/delAccufetchList',
            payload: param,
          });
        }
      },
      onCancel: () => {
        this.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 已创建-启用状态(社保)
  socialAbleStatus = custInsAccoId => {
    const { dispatch } = this.props;
    this.setState({ selectedRowKeys: [custInsAccoId] });
    confirm({
      icon: <QuestionCircleOutlined />,
      title: `你确定要启用吗？`,
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        dispatch({
          type: 'singlemanage/beginInsUse',
          payload: { custInsAccoId },
        });
        this.setState({ selectedRowKeys: [] });
      },
      onCancel: () => {
        this.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 已创建-启用状态(公积金)
  funStatus = custAccuAccoId => {
    const { dispatch } = this.props;
    this.setState({ selectedRowKeys: [custAccuAccoId] });
    confirm({
      icon: <QuestionCircleOutlined />,
      title: `你确定要启用吗？`,
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        dispatch({
          type: 'singlemanage/beginAccuUse',
          payload: { custAccuAccoId },
        });
        this.setState({ selectedRowKeys: [] });
      },
      onCancel: () => {
        this.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 已启用-停用状态（社保）
  socialStopStatus = custInsAccoId => {
    const { dispatch } = this.props;
    this.setState({ selectedRowKeys: [custInsAccoId] });
    confirm({
      icon: <QuestionCircleOutlined />,
      title: `你确定要停用吗？`,
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        dispatch({
          type: 'singlemanage/endInsUse',
          payload: { custInsAccoId },
        });
        this.setState({ selectedRowKeys: [] });
      },
      onCancel: () => {
        this.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 已启用-停用状态（公积金）
  funStopStatus = custAccuAccoId => {
    const { dispatch } = this.props;
    this.setState({ selectedRowKeys: [custAccuAccoId] });
    confirm({
      icon: <QuestionCircleOutlined />,
      title: `你确定要停用吗？`,
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        dispatch({
          type: 'singlemanage/endAccuUse',
          payload: { custAccuAccoId },
        });
        this.setState({ selectedRowKeys: [] });
      },
      onCancel: () => {
        this.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 指派
  assignResp = () => {
    const { respAllList } = this.props;
    const { selectedRowKeys, selectedRows } = this.state;
    if (!selectedRowKeys.length) {
      message.warning('请至少选择一条数据');
    } else if (selectedRowKeys.length === 1) {
      const respAllArr = [];
      respAllList.forEach(item => respAllArr.push(item.userId));
      const respList = [];
      if (!selectedRows[0] || !selectedRows[0].respList || !selectedRows[0].respList.length) {
        respList.push('all');
      } else {
        selectedRows[0].respList.forEach(item => {
          if (respAllArr.indexOf(item.respId) > -1) {
            respList.push(item.respId);
          }
        });
      }
      this.setState({ modalVisible: true }, () => {
        this.formRef.current.setFieldsValue({ respList });
      });
    } else {
      this.setState({ modalVisible: true }, () => {
        this.formRef.current.resetFields(['respList']);
      });
    }
  };

  // 提交指派数据
  submitData = async () => {
    const { dispatch, activeKey, formFieldsValue } = this.props;
    const { selectedRowKeys } = this.state;
    const values = await this.formRef.current.validateFields(['respList']);
    let { respList } = values;
    if (respList && respList.includes('all')) {
      respList = [];
    }
    await dispatch({
      type: 'singlemanage/assignResp',
      payload: { accoList: selectedRowKeys, respList },
    }).then(response => {
      if (response && response.success) {
        this.setState({ modalVisible: false, selectedRowKeys: [], selectedRows: [] }, () => {
          this.searchList(this.processFormData(formFieldsValue), activeKey);
        });
        message.success('指派成功！');
      } else {
        message.warning(`${(response && response.message) || '指派失败！'}`);
      }
    });
  };

  renderSimpleForm() {
    const {
      formFieldsValue,
      activeKey,
    } = this.props;
    const { userType } = this.state;
    return (
      <Form ref={this.formRef} layout="inline" initialValues={formFieldsValue}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.formItemLayout} label="客户名称" name="custId">
              { userType === 1 ? <Customer allowClear /> : <Customer attr allowClear />}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.formItemLayout} label="账户名称" name="accoName">
              <Input placeholder="请输入" />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" onClick={() => this.searchBtnList(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {
      formFieldsValue,
      dictCode,
      respList,
      activeKey,
    } = this.props;
    const { userType } = this.state;
    return (
      <Form ref={this.formRef} layout="inline" initialValues={formFieldsValue}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" {...this.formItemLayout} name="custId">
              { userType === 1 ? <Customer allowClear /> : <Customer attr allowClear />}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.formItemLayout} label="账户名称" name="accoName">
              <Input placeholder="请输入" />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.formItemLayout} label="地区" name="areaId">
              <Area getData={this.getData} allowClear labelInValue />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.formItemLayout} label="账户状态" name="state">
              <Select placeholder="请选择" allowClear>
                {dictCode.CUST_ACCO_STATE &&
                    dictCode.CUST_ACCO_STATE.map(item => (
                      <Option key={item.itemCode}>{item.itemName}</Option>
                    ))}
              </Select>
            </FormItem>
          </Col>
          {activeKey === '1' && checkPermissions('business:custInsAcco:appoint') ? (
            <Col md={8} sm={24}>
              <FormItem {...this.formItemLayout} label="申报负责人" name="respId">
                <HOCSelect
                  placeholder="请输入关键字检索"
                  showSearch
                  optionFilterProp="children"
                  allowClear
                >
                  {respList.map(item => (
                    <Option key={item.userId}>{item.userName}</Option>
                    ))}
                </HOCSelect>
              </FormItem>
            </Col>
          ) : activeKey === '2' && checkPermissions('business:custAccuAcco:appoint') ? (
            <Col md={8} sm={24}>
              <FormItem {...this.formItemLayout} label="申报负责人" name="respId">
                <HOCSelect
                  placeholder="请输入关键字检索"
                  showSearch
                  optionFilterProp="children"
                  allowClear
                >
                  {respList.map(item => (
                    <Option key={item.userId}>{item.userName}</Option>
                    ))}
                </HOCSelect>
              </FormItem>
            </Col>
          ) : (
            <Col md={8} sm={24} />
          )}
          <Col md={8} sm={24}>
            <div style={{ overflow: 'hidden' }}>
              <span style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" onClick={() => this.searchBtnList(activeKey)}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起 <UpOutlined />
                </a>
              </span>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const { selectedRowKeys, selectedRows, modalVisible } = this.state;
    const {
      pageData,
      loading,
      dictCode,
      activeKey,
      submitLoading,
      respAllList,
      location,
      login,
    } = this.props;
    // 模态框布局
    const formItemLayoutModal = {
      labelCol: { md: { span: 6 } },
      wrapperCol: { md: { span: 16, offset: 1 } },
    };
    const tempUrl = location.pathname && location.pathname.split('/index')[0];
    // 社保账户表格字段
    const columns = [
      {
        title: '社保账户名称',
        dataIndex: 'accoName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '地区',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '社保组合',
        dataIndex: 'plcyName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业工伤比例(%)',
        dataIndex: 'ratioVal',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (text || Number(text) === 0 ? text : '--'),
        align: 'right',
      },
      {
        title: '账户状态',
        dataIndex: 'state',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          dictCode.CUST_ACCO_STATE &&
          dictCode.CUST_ACCO_STATE.map(status => {
            if (Number(status.itemCode) === val) {
              let statusStyle = '';
              if (status.itemCode === '1') {
                // 已创建
                statusStyle = 'default';
              }
              if (status.itemCode === '2') {
                // 已启用
                statusStyle = 'success';
              }
              if (status.itemCode === '3') {
                // 已停用
                statusStyle = 'error';
              }
              return <Badge key={status.itemCode} status={statusStyle} text={status.itemName} />;
            }
          }),
      },
      {
        title: '申报负责人',
        dataIndex: 'respNameList',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            display: checkPermissions('business:custInsAcco:appoint') ? 'table-cell' : 'none',
          },
        }),
        onCell: () => ({
          style: {
            display: checkPermissions('business:custInsAcco:appoint') ? 'table-cell' : 'none',
          },
        }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            display: checkPermissions('business:custInsAcco:appoint') ? 'table-cell' : 'none',
          },
        }),
        onCell: () => ({
          style: {
            display: checkPermissions('business:custInsAcco:appoint') ? 'table-cell' : 'none',
          },
        }),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => {
          if (record.state === 1) {
            // 已创建
            return (
              <span>
                <Authorized authority="business:custInsAcco:beginUse" noMatch={null}>
                  <a onClick={() => this.socialAbleStatus(record.custInsAccoId, record.state)}>
                    启用
                  </a>
                </Authorized>
                <Authorized authority="business:custInsAcco:beginUse" noMatch={null}>
                  <Divider type="vertical" />
                </Authorized>
                <Dropdown
                  // eslint-disable-next-line react/jsx-indent-props
                  overlay={
                    <Menu>
                      <Menu.Item key="look" onClick={() => this.goDetails(record.custInsAccoId)}>
                        查看
                      </Menu.Item>
                      {checkPermissions('business:custInsAcco:update') && (
                        <Menu.Item key="update" onClick={() => this.goUpdate(record.custInsAccoId)}>
                          修改
                        </Menu.Item>
                      )}
                      {checkPermissions('business:custInsAcco:delete') && (
                        <Menu.Item key="delete" onClick={() => this.delList(record.custInsAccoId)}>
                          删除
                        </Menu.Item>
                      )}
                    </Menu>
                  }
                >
                  <a>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
            );
          }
          if (record.state === 2) {
            // 已启用
            return (
              <span>
                <a onClick={() => this.goDetails(record.custInsAccoId)}>查看</a>
                {checkPermissions([
                  'business:custInsAcco:update',
                  'business:custInsAcco:endUse',
                ]) && <Divider type="vertical" />}
                {checkPermissions([
                  'business:custInsAcco:update',
                  'business:custInsAcco:endUse',
                ]) && (
                  <Dropdown
                    overlay={
                      <Menu>
                        {checkPermissions('business:custInsAcco:update') && (
                          <Menu.Item
                            key="update"
                            onClick={() => this.goUpdate(record.custInsAccoId)}
                          >
                            修改
                          </Menu.Item>
                        )}
                        {checkPermissions('business:custInsAcco:endUse') && (
                          <Menu.Item
                            key="look"
                            onClick={() =>
                              this.socialStopStatus(record.custInsAccoId, record.state)
                            }
                          >
                            停用
                          </Menu.Item>
                        )}
                      </Menu>
                    }
                  >
                    <a>
                      更多 <DownOutlined />
                    </a>
                  </Dropdown>
                )}
              </span>
            );
          }
          if (record.state === 3) {
            // 停用
            return (
              <span>
                <a onClick={() => this.goDetails(record.custInsAccoId)}>查看</a>
                {checkPermissions([
                  'business:custInsAcco:update',
                  'business:custInsAcco:beginUse',
                ]) && <Divider type="vertical" />}
                {checkPermissions([
                  'business:custInsAcco:update',
                  'business:custInsAcco:beginUse',
                ]) && (
                  <Dropdown
                    overlay={
                      <Menu>
                        {checkPermissions('business:custInsAcco:update') && (
                          <Menu.Item
                            key="update"
                            onClick={() => this.goUpdate(record.custInsAccoId)}
                          >
                            修改
                          </Menu.Item>
                        )}
                        {checkPermissions('business:custInsAcco:beginUse') && (
                          <Menu.Item
                            key="look"
                            onClick={() =>
                              this.socialAbleStatus(record.custInsAccoId, record.state)
                            }
                          >
                            启用
                          </Menu.Item>
                        )}
                      </Menu>
                    }
                  >
                    <a>
                      更多 <DownOutlined />
                    </a>
                  </Dropdown>
                )}
              </span>
            );
          }
        },
      },
    ];
    // 公积金账户表格字段
    const columns1 = [
      {
        title: '公积金账户名称',
        dataIndex: 'accoName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '地区',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '公积金组合',
        dataIndex: 'accuPkgName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '账户状态',
        dataIndex: 'state',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          dictCode.CUST_ACCO_STATE &&
          dictCode.CUST_ACCO_STATE.map(status => {
            if (Number(status.itemCode) === val) {
              let statusStyle = '';
              if (status.itemCode === '1') {
                // 已创建
                statusStyle = 'default';
              }
              if (status.itemCode === '2') {
                // 已启用
                statusStyle = 'success';
              }
              if (status.itemCode === '3') {
                // 已停用
                statusStyle = 'error';
              }
              return <Badge key={status.itemCode} status={statusStyle} text={status.itemName} />;
            }
          }),
      },
      {
        title: '申报负责人',
        dataIndex: 'respNameList',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            display: checkPermissions('business:custAccuAcco:appoint') ? 'table-cell' : 'none',
          },
        }),
        onCell: () => ({
          style: {
            display: checkPermissions('business:custAccuAcco:appoint') ? 'table-cell' : 'none',
          },
        }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            display: checkPermissions('business:custAccuAcco:appoint') ? 'table-cell' : 'none',
          },
        }),
        onCell: () => ({
          style: {
            display: checkPermissions('business:custAccuAcco:appoint') ? 'table-cell' : 'none',
          },
        }),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => {
          if (record.state === 1) {
            // 已创建
            return (
              <span>
                <Authorized authority="business:custAccuAcco:beginUse" noMatch={null}>
                  <a onClick={() => this.funStatus(record.custAccuAccoId, record.state)}>启用</a>
                </Authorized>
                <Authorized authority="business:custAccuAcco:beginUse" noMatch={null}>
                  <Divider type="vertical" />
                </Authorized>
                <Dropdown
                  overlay={
                    <Menu>
                      <Menu.Item key="look" onClick={() => this.goDetails(record.custAccuAccoId)}>
                        查看
                      </Menu.Item>
                      {checkPermissions('business:custAccuAcco:update') && (
                        <Menu.Item
                          key="update"
                          onClick={() => this.goUpdate(record.custAccuAccoId)}
                        >
                          修改
                        </Menu.Item>
                      )}
                      {checkPermissions('business:custAccuAcco:delete') && (
                        <Menu.Item key="delete" onClick={() => this.delList(record.custAccuAccoId)}>
                          删除
                        </Menu.Item>
                      )}
                    </Menu>
                  }
                >
                  <a>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
            );
          }
          if (record.state === 2) {
            // 已启用
            return (
              <span>
                <a onClick={() => this.goDetails(record.custAccuAccoId)}>查看</a>
                {checkPermissions([
                  'business:custAccuAcco:update',
                  'business:custAccuAcco:endUse',
                ]) && <Divider type="vertical" />}
                {checkPermissions([
                  'business:custAccuAcco:update',
                  'business:custAccuAcco:endUse',
                ]) && (
                  <Dropdown
                    overlay={
                      <Menu>
                        {checkPermissions('business:custAccuAcco:update') && (
                          <Menu.Item
                            key="update"
                            onClick={() => this.goUpdate(record.custAccuAccoId)}
                          >
                            修改
                          </Menu.Item>
                        )}
                        {checkPermissions('business:custAccuAcco:endUse') && (
                          <Menu.Item
                            key="look"
                            onClick={() => this.funStopStatus(record.custAccuAccoId, record.state)}
                          >
                            停用
                          </Menu.Item>
                        )}
                      </Menu>
                    }
                  >
                    <a>
                      更多 <DownOutlined />
                    </a>
                  </Dropdown>
                )}
              </span>
            );
          }
          if (record.state === 3) {
            // 停用
            return (
              <span>
                <a onClick={() => this.goDetails(record.custAccuAccoId)}>查看</a>
                {checkPermissions([
                  'business:custAccuAcco:update',
                  'business:custAccuAcco:beginUse',
                ]) && <Divider type="vertical" />}
                {checkPermissions([
                  'business:custAccuAcco:update',
                  'business:custAccuAcco:beginUse',
                ]) && (
                  <Dropdown
                    overlay={
                      <Menu>
                        {checkPermissions('business:custAccuAcco:update') && (
                          <Menu.Item
                            key="update"
                            onClick={() => this.goUpdate(record.custAccuAccoId)}
                          >
                            修改
                          </Menu.Item>
                        )}
                        {checkPermissions('business:custAccuAcco:beginUse') && (
                          <Menu.Item
                            key="look"
                            onClick={() => this.funStatus(record.custAccuAccoId, record.state)}
                          >
                            启用
                          </Menu.Item>
                        )}
                      </Menu>
                    }
                  >
                    <a>
                      更多 <DownOutlined />
                    </a>
                  </Dropdown>
                )}
              </span>
            );
          }
        },
      },
    ];
    // 社保账户列表
    const socialCont = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          <Authorized authority="business:custInsAcco:insert" noMatch={null}>
            <Button type="primary" onClick={this.addSocial} style={{ marginRight: 8 }}>
              <PlusOutlined />
              新增
            </Button>
          </Authorized>
          <Authorized authority="business:custInsAcco:appoint" noMatch={null}>
            {login.baseUser && login.baseUser.postType === 2 ? ( // 管理岗
              <Button type="primary" onClick={() => this.assignResp()} style={{ marginRight: 8 }}>
                指派
              </Button>
            ) : null}
          </Authorized>
          <Authorized authority="cs:custInsAcco:uploadCustInsAcco" noMatch={null}>
            <Button onClick={() => router.push(`${tempUrl}/insbatchadd?activeKey=${activeKey}`)}>
              批量新增
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="custInsAccoId"
          columns={columns}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 公积金账户列表
    const fundCont = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          <Authorized authority="business:custAccuAcco:insert" noMatch={null}>
            <Button type="primary" onClick={this.addFund} style={{ marginRight: 8 }}>
              <PlusOutlined />
              新增
            </Button>
          </Authorized>
          <Authorized authority="business:custAccuAcco:appoint" noMatch={null}>
            {login.baseUser && login.baseUser.postType === 2 ? ( // 管理岗
              <Button type="primary" onClick={() => this.assignResp()} style={{ marginRight: 8 }}>
                指派
              </Button>
            ) : null}
          </Authorized>
          <Authorized authority="cs:custAccuAcco:uploadCustAccuAcco" noMatch={null}>
            <Button onClick={() => router.push(`${tempUrl}/accubatchadd?activeKey=${activeKey}`)}>
              批量新增
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="custAccuAccoId"
          columns={columns1}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
              {dictCode.CUST_ACCO_PAGE &&
                dictCode.CUST_ACCO_PAGE.sort((a, b) => a.itemCode - b.itemCode).map(pane => (
                  <TabPane tab={pane.itemName} key={pane.itemCode}>
                    {pane.itemCode === '1' ? socialCont : fundCont}
                  </TabPane>
                ))}
            </Tabs>
          </div>
        </Card>
        <Modal
          title="指派申报负责人"
          destroyOnClose
          confirmLoading={submitLoading}
          visible={modalVisible}
          onOk={this.submitData}
          onCancel={() => this.setState({ modalVisible: false })}
        >
          <Form ref={this.formRef}>
            <FormItem {...formItemLayoutModal} label="申报负责人" name="respList" rules={[{ required: modalVisible, message: '请选择' }]}>
              <HOCSelect
                placeholder="请输入关键字检索，可复选"
                showSearch
                mode="multiple"
                optionFilterProp="children"
              >
                {respAllList.map(item => (
                  <Option key={item.userId}>{item.userName}</Option>
                  ))}
              </HOCSelect>
            </FormItem>
          </Form>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
